<template>
  <div>
    <van-sticky>
      <van-nav-bar title="作品" left-arrow @click-left="goback" />
    </van-sticky>
    <div class="contain">
      <div class="top">
        <div class="left">
          <van-image
            class="tx"
            round
            width="2.5rem"
            height="2.5rem"
            fit="cover"
            src="https://img01.yzcdn.cn/vant/cat.jpeg"
          />
          <div class="middle">
            <span class="spname">penny</span>
            <span class="sptime">8分钟前</span>
          </div>
        </div>
        <button>+关注</button>
      </div>
      <div>
        <span class="spnr">橙香葡萄干欧包</span>
        <div class="main">
          <van-image
            class="img2"
            width="150"
            src="/baking_log/FrP8XrmbzlWDVkhfOpqhXwvBct5Q.png"
          />
          <van-image
            class="img2"
            width="150"
            src="/baking_log/FrP8XrmbzlWDVkhfOpqhXwvBct5Q.png"
          />
          <van-image
            class="img2"
            width="150"
            src="/baking_log/FrP8XrmbzlWDVkhfOpqhXwvBct5Q.png"
          />
          <van-image
            class="img2"
            width="150"
            src="/baking_log/FrP8XrmbzlWDVkhfOpqhXwvBct5Q.png"
          />
        </div>
      </div>
    </div>
    <div class="title">帮友评论</div>
    <div class="comments">
      <div class="comment">
        <div>
          <van-image
            round
            fit="cover"
            width="2rem"
            height="2rem"
            src="/baking1/logo@57.png"
          ></van-image>
        </div>
        <div class="right">
          <div class="name">
            <span>小泉忧yuu</span>
            <span>2022-10-20 18:21</span>
          </div>
          <div class="content">
            专属天猫双十一红包，专属天猫双十一红包，专属天猫双十一红包，专属天猫双十一红包，专属天猫双十一红包，第一时间领取大概率得红包，分享给别人还能增加大包概率，祝大家领到红包
          </div>
        </div>
      </div>
    </div>
    <div style="height: 50px"></div>
    <div class="footer">
      <van-field
        @click="showPopup"
        readonly
        placeholder="点我发评论"
      ></van-field>
      <!-- 点赞评论数 -->
      <div class="count">
        <div class="left">
          <img
            @click="update"
            v-show="!upvote"
            class="dz"
            src="/baking_log/dianzan.png"
            alt=""
          />
          <img
            @click="update"
            v-show="upvote"
            class="dz"
            :src="require('../assets/login_logo/upvote2.png')"
            alt=""
          />
          <span class="num">50</span>
        </div>
        <div class="right">
          <img class="dz" src="/baking_log/pinglun.png" alt="" />
          <span class="num">1</span>
        </div>
      </div>
    </div>
    <van-popup
      v-model="show"
      position="bottom"
      :style="{ height: '40%' }"
      safe-area-inset-bottom
    >
      <div class="publish">
        <van-field
          v-model="value"
          autofocus
          placeholder="请输入一条友善的评论"
        ></van-field>
        <span>发布</span>
      </div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      upvote: false,
      show: false,
      value: "",
    };
  },
  methods: {
    update() {
      if (this.upvote == true) {
        return (this.upvote = false);
      } else {
        return (this.upvote = true);
      }
    },
    showPopup() {
      this.show = true;
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
:deep(.van-nav-bar__arrow) {
  font-size: 18px;
  color: #4a4945;
}
:deep(.van-nav-bar__title) {
  font-size: 18px;
  font-weight: bold;
  color: #4a4945;
}
:deep(.van-field__control) {
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}
.footer {
  display: flex;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.count {
  display: flex;
  padding: 0 15px;
  align-items: center;
}
.count > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 10px;
}
.count > div > span {
  color: #ccc;
  font-size: 0.5rem;
}
.count > div > .dz {
  width: 20px;
  height: 20px;
}
.publish {
  display: flex;
  align-items: center;
}
:deep(.publish .van-cell) {
  width: 85%;
}
.publish > span {
  padding-left: 10px;
  font-size: 16px;
  color: #e98b71;
}
</style>

<style lang="scss" scoped>
.contain {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 15px;
}
.top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.left {
  display: flex;
}
.tx {
  margin-right: 10px;
}
.middle {
  display: flex;
  flex-direction: column;
}
.spname {
  font-size: 13px;
  line-height: 20px;
  color: #4a4945;
}
.sptime {
  font-size: 12px;
  line-height: 20px;
  color: #999999;
}
.spnr {
  margin: 10px 0;
  font-size: 14px;
  color: #4a4945;
  line-height: 20px;
  display: block;
}
button {
  font-size: 10px;
  width: 58px;
  height: 28px;
  border-style: none;
  border: 1px solid #e98b71;
  color: #e98b71;
  background-color: #ffffff;
  border-radius: 4px;
}
.main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.img2 {
  margin: 0 5px 10px 0;
}
.title {
  padding: 10px 15px 0;
  background-color: #fff;
  margin-top: 10px;
  font-size: 20px;
  font-weight: bold;
}
.comments {
  background-color: #fff;
  > .comment {
    padding: 15px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    > .right {
      margin-left: 11px;
      flex-grow: 1;
      > .name {
        display: flex;
        flex-direction: column;
        > span:nth-child(1) {
          color: #e98b71;
          font-size: 15px;
        }
        > span:nth-child(2) {
          font-size: 10px;
          color: rgba(49, 49, 49, 0.5);
        }
      }
      > .content {
        padding-top: 10px;
        font-size: 15px;
        color: #333;
        line-height: 21px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        text-overflow: ellipsis;
        word-break: break-all;
        word-wrap: break-word;
        overflow: hidden;
      }
    }
  }
}
</style>
